<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <title>BNU 120 校史百科</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
    <link rel="manifest" href="/static/manifest.json" type="application/manifest+json">
    <link rel="canonical" href="https://bnu.muspimerol.site{{ request.path }}">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="uno.css">
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@200;300;400;500;600;700;900&display=swap">
    {{ env.HEAD_SCRIPTS | safe }}
    <style>
        body {
            background: var(--bg);
            font-family: "Noto Serif SC", serif;
        }

        #scene {
            position: fixed;
            right: 50%;
            bottom: 50%;
            transform: translate(50%, 50%);
        }

        #card {
            box-sizing: border-box;
            overflow-y: scroll;
            max-width: min(calc(100% - 4em), calc(600px + max(50vw - 50vh, 0px)), calc(2000px - 80vh));
            max-height: calc(100% - 4em);
            border: 0.11em solid #80808020;
            padding: calc(20px + 1%);
            border-radius: 0.5em;
            display: flex;
            flex-direction: column;
            background: #ffffff60;
        }

        #card::-webkit-scrollbar {
            display: none;
        }

        :root {
            --bg: white;
            --primary: #AF1E24;
        }

        *::selection {
            background: var(--primary);
            color: white;
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --bg: #111;
                --primary: #FF6E74;
                color: white;
            }

            #card {
                background: #11111160;
            }
        }

        .full {
            position: fixed;
            left: 0;
            top: 0;
            overflow: hidden;
            width: 100%;
            height: 100vh;
        }

        #scene span {
            --o: 0;
            opacity: var(--o);
            color: #808080;
            display: block;
            position: fixed;
            width: 5em;
            height: 3em;
            padding-top: 1.5em;
            text-align: center;
            transition-duration: 400ms;
            transition-timing-function: ease-out;
            transition-property: scale, opacity, filter;
            --scale: 80%;
            scale: var(--scale);
            --blurRadius: 5px;
            filter: blur(var(--blurRadius));
            white-space: nowrap;
            font-weight: normal;
            font-size: calc(14px + 0.25vmin);
            letter-spacing: 0.1em;
        }

        a {
            letter-spacing: 0.5pt;
            transition: all 200ms;
            display: block;
            border-radius: 0.25em;
            border: solid 0.11em var(--primary);
            font-weight: bold;
            opacity: 30%;
            padding: 0.5em 0.7em;
            width: fit-content;
            text-decoration: none;
            color: var(--primary);
        }

        a:hover {
            color: var(--bg);
            background: var(--primary);
            opacity: 1;
            border: solid 0.11em var(--primary);
        }
    </style>
</head>
<body>

<div id="scene"></div>
<div style="box-shadow: inset var(--bg) 0 0 30vmin 15vmin" class="full"></div>

<div class="full" style="display: grid; place-items: center">
    <div id="card" class="backdrop-blur-1.2em">
        <h1 class="text-$primary text-2xl sm:text-3xl m-0 tracking-wide font-mono">
            <span class="mr-2">BNU</span><span class="mr-2">120</span><span class="text-0.9em">校史百科</span>
        </h1>
        <p class="text-16px sm:text-18px line-height-6.5 sm:line-height-8 font-300 mt-1.5 sm:mt-3 mb-3.5 sm:mb-5">
            北京师范大学作为中国最高师范学府，前身为1902年成立的京师大学堂师范馆，距今已有接近120年历史。北京师范大学身处北京地区，经历了清末改革、辛亥革命清帝退位、国民政府北伐初步统一、北平和平解放等重大事件，积极参与了五四运动、一二九运动等学生运动，具有经历的丰富性和思想的先进性，是近代时期中国救亡图存运动的见证者；北京师范大学是全国最高等级的师范院校，从北师大出版社出版的众多中小学教辅和教材，到培养出的各式各样的中小学基础教育教师，以“学为人师，行为世范”为校训的北师大是全国基础教育发展和改革的积极推动者；北京师范大学积极投身国家事业，发起“四有”好老师启航计划、“志远计划”推动中西部贫困地区教育事业发展，是中国扶贫减贫事业重要的教育支柱。北师大近120周年的历史，既是中国近代仁人志士和有识之士救亡图存的历程，也是中国高等教育发展壮大的过程，更是中华民族从危急时刻转危为安，踏上中华民族伟大复兴征程的见证。
        </p>
        <div class="flex flex-row gap-3 <sm:text-sm <sm:[&>a]:px-2 <sm:[&>a]:py-1.5">
            <a href="/北师大" style="opacity: 1"> 从北师大开始浏览 </a>
            <a href="/about"> 关于本站 </a>
        </div>
    </div>
</div>

</body>
<script>

    const scene = document.getElementById("scene")

    const width = window.innerWidth
    const height = window.innerHeight
    const depthScale = 100

    function create_person_node(name) {
        let span = document.createElement("span")
        let depth = Math.random()
        span.innerHTML = name

        span.setAttribute("data-depth", (depth * depthScale).toString())
        scene.appendChild(span)
    }

    function decorate_person_node(span) {
        let depth = span.getAttribute("data-depth") / depthScale
        let x = Math.random() - 0.5
        let y = Math.random() - 0.5
        span.style.left = `${x * width * (0.9 + depth / 2)}pt`
        span.style.top = `${y * height * (0.9 + depth / 2)}pt`
        setTimeout(() => {
            span.style.setProperty("--o", Math.ceil(Math.random() * 100) + "%")
            span.style.setProperty("--scale", 1)
            span.style.setProperty("--blurRadius", 0)
        }, (Math.random() ** 2) * 2000)
    }

    fetch("/api/people/list").then(response => response.json()).then(people => {
        people.forEach(create_person_node) // todo: add sampling based on screen size
        const factor = Math.sqrt(width / height)
        new Parallax(scene).scalar(10 * factor, 10 / factor)
        scene.childNodes.forEach(decorate_person_node)
    })

</script>
<script> if ("serviceWorker" in navigator) navigator.serviceWorker.register("/sw.js", {scope: "/"}).then(console.log) </script>
</html>
